<template>
	<div class="home_footer">
		<div class="display_sw3">
			<div class="home_left3">
				<span @click="qianmoshi">{{jiyuan}}</span> 模式
				<span><input type="text" v-model="jibei" /></span> 倍
			</div>
			<p class="home_you_fz">
				奖金：
				<b>{{jiangjin}}</b>
			</p>
		</div>
		<div class="display_strad">
			<div class="footer_div1">
				<i class="footer_div1_i" @click="showPopup">
              <img src="../../../assets/images/caipiao/footer01.png" alt />
            </i>
				<div class="footer_div1_div">
					<i class="footer_div1_i1">
                <img src="../../../assets/images/caipiao/footer02.png" alt />
              </i>
					<div class="touqian">
						<p>
							共
							<b class="color_red">{{xiazhushu}}</b> 注
						</p>
						<p>
							共
							<b class="color_red">{{xiazhuyuan}}</b>元
						</p>
					</div>
				</div>
			</div>
			<button class="footer_xiazhu" @click="handlerSubmit">立即下注</button>
			<span class="footer_a" @click="xiazhulan">号码篮</span>
		</div>
		<!--底部左下角闪电下注-->
		<van-popup v-model="show" position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
		</van-popup>
		<!--下注弹出密码框-->
		<van-dialog v-model="mimashow" title="温馨提示" show-cancel-button>
			<div class="jiaoyi_div">
				<p class="jiaoyi_tishi_p">是否确认下注，确认请输入交易密码</p>
				<input type="text" class="jiaoyi_input" placeholder="请输入交易密码" />
			</div>
		</van-dialog>
		<!--点击模式选-元-角-分-厘  弹出-->
		<van-popup v-model="qianshow" position="bottom">
			<van-picker show-toolbar :columns="columns2" @cancel="onCancel2" @confirm="onConfirm2" />
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//交易密码
				mimashow: false,
				jiyuan: "元", //几元模式底部
				jibei: "1", //几倍底部
				jiangjin: "18", //底部右侧奖金
				xiazhushu: "1", //下注几倍底部
				xiazhuyuan: "2", //下注几元底部

				//底部
				show: false, //开始闪电随机加注不显示
				columns: ["随机1注", "随机5注", "随机10注"], //下注闪电
				qianshow: false, //这是模式选择的弹窗
				columns2: ["元", "角", "分", "厘"], //点击模式选择钱的模式
				mimashow:false,//密码框默认不显示
				//传给后台
				number_string: "", //参数前三和值的号码串


			}
		},
		methods: {
			//底部的号码栏
			xiazhulan() {
				this.$router.push("/gf/xiazhulan");

			},
			//闪电下注弹出底部弹窗
			showPopup() {
				this.show = true;
			},

			//底部闪电下单确定
			onConfirm(value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
			},
			//底部闪电下单取消
			onCancel() {
				this.show = false;
			},
			//参数前三和值的号码串
			handlerwan(val) {
				let result = val.join(",");
				this.number_string = result;
			},
			//一帆风顺底部下注
			handlerSubmit() {
				//接口
				let {
					number_string
				} = this; //参数前三和值的号码串
				this.http
					.post("/api/top_three/direct/sum", {
						number_string
					})
					.then(res => {

					});
				//下注弹出交易密码框
				this.mimashow = true;
			},
			//点击模式时候弹出窗
			qianmoshi() {
				this.qianshow = true;
			},
			//点击模式取消
			onCancel2(){
				this.qianshow = false;
			},
			//点击模式确定
			onConfirm2(value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
			},
		}
	}
</script>

<style>
	/* 交易弹窗 */

	.jiaoyi_div {
		margin-top: 0.2rem;
	}

	.jiaoyi_input {
		width: 85%;
		margin: 0.5rem auto;
		display: block;
		border: 2px solid #f5f5f5;
		padding: 0.1rem 0.1rem;
		font-size: 0.3rem;
	}

	.jiaoyi_tishi_p {
		text-align: center;
		font-size: 0.25rem;
	}
</style>
